<template>
  <div class="dashboard-editor-container">

    <el-row v-for="(value, index) in lineArr" :key="index" style="background:#fff;margin-bottom:32px;">
      <div style="margin-bottom: 10px; text-align: center;">
        <span>站长号：{{ value.qudao }}</span>
      </div>
      <line-chart :chart-data="lineArr[index].lineChartData" class="chart-wrapper" />
    </el-row>

    <pagination v-show="total > listQuery.limit" :total="total" class="pageShow" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getOnline" />
    <pagination v-show="total > listQuery.limit" layout="prev, pager, next" :small="true" class="pageHidden" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getOnline" />
  </div>
</template>

<script>
import LineChart from './components/LineChart'
import { fetchOnline, lineData } from '@/api/cnzz/linechart'
import { Message } from 'element-ui'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
  name: 'Linechart1',
  components: {
    LineChart,
    Pagination
  },
  data() {
    return {
      online: [],
      total: 0,
      listQuery: {
        page: 1,
        limit: 10
      },
      lineArr: []
    }
  },
  mounted: function() {
    this.getOnline()
  },
  methods: {
    getOnline() {
      fetchOnline(this.listQuery).then(response => {
        if (response.code === 1) {
          this.online = response.data
          this.total = response.total
          this.getLineData()
        } else {
          Message({
            message: response.msg || '获取数据失败',
            type: 'error',
            duration: 2000
          })
        }
      })
    },
    getLineData() {
      this.lineArr = []
      for (let i = 0; i < this.online.length; i++) {
        const data = {
          last: 24,
          qudao: this.online[i].qudao,
          type: 3
        }
        lineData(data).then(response => {
          if (response.code === 1) {
            const obj = {
              qudao: this.online[i].qudao,
              lineChartData: {
                time: response.tm,
                uv: response.uv,
                uv2: response.uv2
              }
            }
            this.lineArr.push(obj)
          } else {
            Message({
              message: response.msg || '获取数据失败',
              type: 'error',
              duration: 2000
            })
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(255, 255, 255);
  position: relative;

  .chart-wrapper {
    // border: 1px #ddd solid;
    // box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    box-shadow: 4px 4px 20px #DEDDE5;

    margin-bottom: 32px;
  }
}
.pageHidden{
  display: none;
}
@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
@media (max-width:550px) {
  .pageShow {
    display: none;
  }
  .pageHidden {
    display: block;
  }
  .pickertime{
    width: 100%;
  }
}
</style>
